<template>
<div class="newslist">
    <ul class="mui-table-view">
        <li class="mui-table-view-cell mui-media" v-for="item in newslist" :key="item.id">
            <router-link :to="'/home/newsinfo/' + item.id">
                <img class="mui-media-object mui-pull-left" :src="item.img_url">
                <div class="mui-media-body">
                    <h1>{{ item.title }}</h1>
                    <p class='mui-ellipsis'>
                        <span>发表日期：{{item.add_time | dataFormat('YYYY-MM-DD')}}</span>
                        <span>点击：{{item.click}}次</span>
                    </p>
                </div>
            </router-link>
        </li>
    </ul>
</div>
</template>

<script>

    import { Toast } from 'mint-ui'

    export default {
        name: "newslist",
        data() {
            return {
                newslist: []
            }
        },
        created() {
            this.getNewslist();
        },
        methods:{
            getNewslist(){
                this.$axios.get('/api/getnewslist')
                    .then( result =>{
                        if(result.data.status === 0){
                            this.newslist = result.data.message;
                        }else {
                            Toast('请求失败');
                        }
                    })
            }
        }
    }
</script>

<style lang="scss" scoped>
.mui-table-view {
    li {
        h1 {
            font-size: 14px;
        }
        .mui-ellipsis {
            font-size: 12px;
            color:#007aff;
            display: flex;
            justify-content: space-between;
        }
    }
}
</style>
